<template>
  <div class="login">
    <h2 class="my-2 title w-100 d-flex ai-center jc-center">Login Window</h2>
    <div class="item">
      <input type="text" v-model="loginModel.login.userName" required />
      <label for="">userName</label>
    </div>
    <div class="item">
      <input type="password" v-model="loginModel.login.passWord" required />
      <label for="">password</label>
    </div>
    <button class="btn" @click="login">
      submit
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</template>

<script lang="ts" setup>
import { useCurrentInstance } from "@/utils/ToolsClass/hook";
import { onMounted, reactive,  } from 'vue'
// 获取当前组件实例，ctx可以理解为就是以前的this
const { that } = useCurrentInstance();
let loginModel = reactive({
  login:{
    userName:"",
    passWord:""
  }
})

// 重置事件
const reset = ()=>{
  loginModel.login = {
    userName:'',
    passWord:''
  }
}

// 登录事件
const login = ()=>{
  if(loginModel.login.userName == "" || loginModel.login.passWord == ""){
    return that.$message.error('请填写完整的用户名或密码!')
  }
  that.$router.push('/home')
}

// 键盘事件，进行登录
onMounted(()=>{
  document.onkeydown = (e:any) => {
      let key = 0;
      if (window.event == undefined) {
        key = e.keyCode;
      } else {
        key = (window.event as any).keyCode;
      }
      // enter的ASCII码是13
      if (key == 13) {
        login();
      }
    };
})
</script>

<style lang="scss" scoped>
@import '../../../assets/systemCss/Login.scss';
</style>
